
<template>
  <div>
    <uploadImg v-if="type== 'img'" :dataType="dataType" :upload='upload'/>
    <uploadVideo v-if="type== 'video'" />
  </div>
</template>
<script>
    import uploadImg from '~components/upload/upload-img.vue';
    import uploadVideo from '~components/upload/upload-video.vue';
    import { Dialog,  Button, Message} from 'element-ui'
    export default{
        data(){
            return{
            }
        },

        props:{
            type : {
              default : 'img'
            },
            upload : {
              default : true
            },
            dataType: {
                default : '0'
            }
        },

        components: {
          uploadImg,
          uploadVideo
        },

        methods: {
           uploadImgSuccess(list){
               if (this.upload == true) {
                  var img = []
                  for(let s in list){
                      let p = {}
                      if (list[s].key, list[s].name, list[s].h, list[s].w) {
                        p.key = list[s].key
                        p.name = list[s].name
                        p.h = list[s].h
                        p.w = list[s].w
                        img.push(p)
                      }
                     
                  }
                  if(this.$parent['whenWeSave']){
                     this.$parent['whenWeSave'](list);
                 }
                  var lll = JSON.stringify(img)
                  this.$store.dispatch("saveAddImgs",lll).then(res=>{
                    Message({
                      duration: 3000,
                      message: '上传成功',
                      type: 'success',
                    })
                    if(this.$parent['uploadImgSuccess']){
                        this.$parent['uploadImgSuccess'](list);
                    }
                  })
               }
               
           },

           uploadVideoSuccess(list){
               if(this.$parent['uploadVideoSuccess']){
                   this.$parent['uploadVideoSuccess'](list);
               }
           },
           uploadImageSuccess(file){
               if(this.$parent['uploadImageSuccess']){
                   this.$parent['uploadImageSuccess'](file);
               }
           }
        },

        mounted(){
          var _this = this;
          let src = '//cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js';
          let srcPlupload = '//cdn.staticfile.org/plupload/2.1.9/plupload.full.min.js';

            (function(d, s, id){
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
                js.src = srcPlupload;
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'plupload-jssdk'));

            (function(d, s, id){
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) {return;}
                js = d.createElement(s); js.id = id;
                js.src = src;
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'qiniu-jssdk'));
        }

    }
</script>

<style lang="scss">

.upload-main{

    .el-input {
        width: 172px;
        height: 28px;
    }
    .btn-common {
        margin-left: 10px;
    }

    .dialog-footer {
        border-top: 1px solid #EAEEF0;
        padding-top: 15px;
    }
     .el-dialog--small{
        width: 801px;
    }


    .el-dialog__header{
      border-bottom:1px #EAEEF0 solid;
    }


    #upload-img-handler-container {
      position:relative;
      border-radius: 4px;
      height: 90px;
      /*margin-left:340px;*/
      display: inline-block;
      background-color: #f3f7fa;
      border:1px #d7dee4 dashed;
      .desc{
        position:absolute;
        bottom:-25px;
        left: -45px;
        display: block;
        width: 200px;
      }


    }
    .upload-masker,.upload-operator{
      width: 78px;
      height: 78px;
      position:absolute;
      left:6px;
      top:6px;
      background-color:#000;
      
    }

    .upload-masker{
      opacity: .25;
    }

    .upload-operator{
      //text-align: center;
      display: none;
      vertical-align: middle;
      padding-top:28px;
      height: 50px;
      z-index: 100;
      background-color:transparent;
      span{
        color:#fff;
        font-size:16px;
        margin-left: 13px;
        display: inline-block;
        vertical-align: middle;
      }
    }

    .upload-img-item:hover .upload-operator{
      display: block;
    }
    #upload-img-handler{
      padding-top:20px;
      width: 90px;
      height: 70px;
      text-align: center;
    }

    .up-txt{
      display: block;
      text-align: center;
    }

    .el-dialog--small .el-dialog__body{
      height: 300px;
      overflow-y: auto;
    }

    .upload-img-list{
      display: flex;
      flex-wrap:wrap;
    }
    .upload-img-item{
      position:relative;
      width: 78px;
      padding:6px;
      border:1px #D5DFE4 solid;
      border-radius: 4px;
      margin: 0 14px 14px 0;
      img{
        display: block;
        width: 78px;
        height: 78px;
        border-radius: 4px;
      }
    }

    .item-id{
      position:absolute;
    }
    .mdl-progress {
        display: block;
        position: absolute;
        top:40px;
        height: 6px;
        width: 76px;
        max-width: 100%
    }

    .mdl-progress>.bar {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 0%;
        transition: width .2s cubic-bezier(.4,0,.2,1)
    }

    .mdl-progress>.progressbar {
        background-color: #fffaea;
        z-index: 1;
        left: 0
    }

    .mdl-progress>.bufferbar {
        /*background-image: linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#3f51b5 ,#3f51b5);*/
        border: 1px #ffb100 solid;
        border-radius:8px;
        background-color:#fffaea;
        z-index: 0;
        left: 0
    }

    .mdl-progress>.auxbar {
        right: 0;
        height: 6px;
    }

    @supports (-webkit-appearance: none) {
        .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate)>.auxbar,.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate)>.auxbar {
            /*background-image:linear-gradient(to right,rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(to right,#3f51b5 ,#3f51b5);*/
            padding-top:1px;
            height: 5px;
            border-radius:none;
            -webkit-mask: url("");
            mask: url("")
        }
    }

    .mdl-progress:not(.mdl-progress--indeterminate)>.auxbar,.mdl-progress:not(.mdl-progress__indeterminate)>.auxbar {
        /*background-image: linear-gradient(to right,rgba(255,255,255,.9),rgba(255,255,255,.9)),linear-gradient(to right,#3f51b5 ,#3f51b5)*/
        background-color: transparent;
    }

    .mdl-progress.mdl-progress--indeterminate>.bar1,.mdl-progress.mdl-progress__indeterminate>.bar1 {
        -webkit-animation-name: indeterminate1;
        animation-name: indeterminate1
    }

    .mdl-progress.mdl-progress--indeterminate>.bar1,.mdl-progress.mdl-progress__indeterminate>.bar1,.mdl-progress.mdl-progress--indeterminate>.bar3,.mdl-progress.mdl-progress__indeterminate>.bar3 {

        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear
    }

    .mdl-progress__indeterminate .bar1{
      border-radius:8px;
      background-color: #e80;
    }

    .mdl-progress.mdl-progress--indeterminate>.bar3,.mdl-progress.mdl-progress__indeterminate>.bar3 {
        
        background-image: none;
        -webkit-animation-name: indeterminate2;
        animation-name: indeterminate2
    }

    @-webkit-keyframes indeterminate1 {
        0% {
            left: 0%;
            width: 0%
        }

        50% {
            left: 25%;
            width: 75%
        }

        75% {
            left: 100%;
            width: 0%
        }
    }

    @keyframes indeterminate1 {
        0% {
            left: 0%;
            width: 0%
        }

        50% {
            left: 25%;
            width: 75%
        }

        75% {
            left: 100%;
            width: 0%
        }
    }

    @-webkit-keyframes indeterminate2 {
        0%,50% {
            left: 0%;
            width: 0%
        }

        75% {
            left: 0%;
            width: 25%
        }

        100% {
            left: 100%;
            width: 0%
        }
    }

    @keyframes indeterminate2 {
        0%,50% {
            left: 0%;
            width: 0%
        }

        75% {
            left: 0%;
            width: 25%
        }

        100% {
            left: 100%;
            width: 0%
        }
    }

}
</style>
